<template>
  <view style="display: flex;align-items: center;">
    <view style="display: flex;align-items: center;width: 40px;height: 40px;padding-right: 10px;">
      <uni-icons v-if="type == 'uni-icons'" style="margin: 0 20rpx;" :type="icon" size="30"></uni-icons>
    </view>
    <view style="display: flex;align-items: center;">
      <button size="mini" type="primary" class="uni-button" @click="open">选择图标</button>
    </view>
  </view>

  <uni-drawer class="insert-icons-drawer" v-if="drawerWidth" ref="unifyIconsDrawer" mode="right" :width="drawerWidth">
    <unify-icons-view @selectIcon="selectIcon" />
  </uni-drawer>
</template>

<script>
  export default {
    name: "unify-icons-picker",
    data() {
      return {
        drawerWidth: 0,
      };
    },
    props: {
      modelValue: {
        type: String,
        default: ""
      }
    },
    computed: {
      type() {
        if (this.modelValue.indexOf("uni-icons-") > -1) {
          return 'uni-icons';
        }

        return null;
      },
      icon() {
        switch (this.type) {
          case "uni-icons":
            return this.modelValue.replace("uni-icons-", "")
        }

        return null;
      }
    },
    mounted() {
      const sysinfo = uni.getSystemInfoSync()
      this.drawerWidth = sysinfo.windowWidth * .7
    },
    methods: {
      selectIcon(value) {
        this.$emit("update:modelValue", value);
        this.$refs.unifyIconsDrawer.close();
      },
      open() {
        this.$refs.unifyIconsDrawer.open();
      }
    }
  }
</script>

<style lang="scss">

</style>